/**
 * "popover" theme for `component/tip`.
 */

.popover {
	font-size: 11px;
	z-index: z-index( 'root', '.popover' );
	position: absolute;
	top: 0;
	left: 0 #{"/*rtl:ignore*/"};
	right: auto #{"/*rtl:ignore*/"};

	.popover__inner {
		background-color: $white;
		border: 1px solid lighten( $gray, 20% );
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.1 ),
			0 0 56px rgba( 0, 0, 0, 0.075 );
		text-align: center;
		position: relative;
	}

	.popover__arrow {
		border: 10px dashed lighten( $gray, 20% );
		height: 0;
		line-height: 0;
		position: absolute;
		width: 0;
		z-index: z-index( '.popover', '.popover .popover__arrow' );
	}

	&.fade {
		transition: opacity 100ms;
	}


	@mixin popover__arrow( $side ) {
		$cross-side: "";
		$opposite-side: "";
		$cross-opposite-side: "";
		@if $side == "top" {
			$opposite-side: "bottom";
			$cross-side: "left";
			$cross-opposite-side: "right";
		} @else if $side == "bottom" {
			$opposite-side: "top";
			$cross-side: "left";
			$cross-opposite-side: "right";
		} @else if $side == "left" {
			$opposite-side: "right";
			$cross-side: "top";
			$cross-opposite-side: "bottom";
		} @else if $side == "right" {
			$opposite-side: "left";
			$cross-side: "top";
			$cross-opposite-side: "bottom";
		}

		&.is-#{$side} .popover__arrow,
		&.is-#{$side}-#{$cross-side} .popover__arrow,
		&.is-#{$side}-#{$cross-opposite-side} .popover__arrow {
			@mixin shared-between-base-and-before {
				#{$cross-side}: 50% #{"/*rtl:ignore*/"};
				margin-#{$cross-side}: -10px#{"/*rtl:ignore*/"};
				border-#{$side}-style: solid#{"/*rtl:ignore*/"};
				border-#{$opposite-side}: none#{"/*rtl:ignore*/"};
				border-#{$cross-side}-color: transparent#{"/*rtl:ignore*/"};
				border-#{$cross-opposite-side}-color: transparent#{"/*rtl:ignore*/"};
			}

			#{$opposite-side}: 0 #{"/*rtl:ignore*/"};
			@include shared-between-base-and-before;

			&::before {
				#{$opposite-side}: 2px #{"/*rtl:ignore*/"};
				border: 10px solid $white;
				content: " ";
				position: absolute;
				@include shared-between-base-and-before;
			}
		}
	}

	@include popover__arrow( "top" );
	@include popover__arrow( "bottom" );
	@include popover__arrow( "left" );
	@include popover__arrow( "right" );

	&.is-top-left,
	&.is-bottom-left,
	&.is-top-right,
	&.is-bottom-right {
		padding-right: 0;
		padding-left: 0;
	}

	&.is-top-left .popover__arrow,
	&.is-bottom-left .popover__arrow {
		left: auto #{"/*rtl:ignore*/"};
		right: 5px #{"/*rtl:ignore*/"};
	}

	&.is-top-right .popover__arrow,
	&.is-bottom-right .popover__arrow {
		left: 15px #{"/*rtl:ignore*/"};
	}

	// inner
	&.is-top .popover__inner,
	&.is-top-left .popover__inner,
	&.is-top-right .popover__inner {
		top: -10px #{"/*rtl:ignore*/"};
	}

	&.is-left .popover__inner,
	&.is-top-right .popover__inner,
	&.is-bottom-right .popover__inner {
		left: -10px #{"/*rtl:ignore*/"};
	}

	&.is-bottom .popover__inner,
	&.is-bottom-left .popover__inner,
	&.is-bottom-right .popover__inner {
		top: 10px #{"/*rtl:ignore*/"};
	}

	&.is-right .popover__inner,
	&.is-top-left .popover__inner,
	&.is-bottom-left .popover__inner {
		left: 10px #{"/*rtl:ignore*/"};
	}

	&.is-dialog-visible {
		z-index: z-index( 'root', 'popover.is-dialog-visible' ); /* Above .dialog */
	}
}

.popover__menu {
	display: flex;
	flex-direction: column;
	min-width: 200px;
}

.popover__menu-item {
	position: relative;
	background: inherit;
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 8px 16px;
	text-align: left;
	text-decoration: none;
	line-height: normal;
	transition: all 0.05s ease-in-out;

	&:first-child {
		margin-top: 5px;
	}

	&,
	&:visited {
		color: $gray-dark;
	}

	&.is-selected,
	&:hover,
	&:focus {
		background-color: $blue-medium;
		border: 0;
		box-shadow: none;
		color: white;

		.gridicon {
			color: $white;
		}
	}

	&[ disabled ]:hover,
	&[ disabled ]:focus {
		background: transparent;
		cursor: default;
	}

	&:last-child {
		margin-bottom: 5px;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	// Menu Items with Icons
	&.has-icon {
		padding-left: 42px;
	}

	// with gridicons
	.gridicon {
		color: lighten( $gray, 10 );
		vertical-align: bottom;
		margin-right: 8px;
	}
	&.is-compact {
		padding: 6px 12px;
		font-size: 11px;
		line-height: 1;
		text-transform: uppercase;
	}
}

.popover__menu-separator,
.popover__hr {
	margin: 8px 0;
	background: lighten( $gray, 30 );
}
